<template>
  <div class="order-management layout-page">
    <div class="pt-40 nav-bar">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main>
      <div class="mb-10 top">
        <div class="flex">
          <div class="item">
            <div class="font-bold text-[32px]">0</div>
            <div class="mb-20 text-custom-gray text-[14px]">待发货</div>
          </div>
          <div class="item">
            <div class="font-bold text-[32px]">0</div>
            <div class="mb-20 text-custom-gray text-[14px]">代付款</div>
          </div>
          <div class="item">
            <div class="font-bold text-[32px]">0</div>
            <div class="mb-10 text-custom-gray text-[14px]">代付款总额</div>
            <div>
              <el-button type="primary">立即支付</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="search-wrap">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="商品名称">
                  <el-input
                    v-model="formInline.user"
                    placeholder="商品名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品ID">
                  <el-input
                    v-model="formInline.user"
                    placeholder="商品ID"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="基础商品">
                  <el-select
                    v-model="formInline.region"
                    placeholder="Activity zone"
                    clearable
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间">
                  <el-date-picker
                    style="width: 280px"
                    v-model="formInline.date"
                    type="daterange"
                    start-placeholder="请选择"
                    end-placeholder="请选择"
                    :default-value="[
                      new Date(2010, 9, 1),
                      new Date(2010, 10, 1),
                    ]"
                    placeholder="创建时间"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间">
                  <el-date-picker
                    style="width: 280px"
                    v-model="formInline.date"
                    type="daterange"
                    start-placeholder="请选择"
                    end-placeholder="请选择"
                    :default-value="[
                      new Date(2010, 9, 1),
                      new Date(2010, 10, 1),
                    ]"
                    placeholder="创建时间"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  <el-button @click="onSubmit">重置</el-button>
                  <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table-wrap">
          <div class="pb-16">
            <el-button @click="batchOrdering" type="primary">新建</el-button>
          </div>
          <div
            class="mb-16 flex justify-between items-center px-24 py-12 bg-[rgba(0,0,0,.02)]"
          >
            <div class="text-[14px] text-custom-gray">
              已选择 {{ multipleSelection.length }} 项
            </div>
            <el-button @click="handleCancelSelect" text
              >取消选择</el-button
            >
          </div>
          <table border="1" class="w-full f-table text-[12px]">
            <colgroup>
              <col style="width: 32px" />
              <col />
              <col style="width: 90px" />
              <col style="width: 154px" />
              <col style="width: 239px" />
              <col style="width: 179px" />
              <col style="width: 118px" />
            </colgroup>
            <thead>
              <tr class="bg-[#f4f5f6]">
                <th class="table-select-column"></th>
                <th>商品信息</th>
                <th>商品数量</th>
                <th>应付金额</th>
                <th>收件信息</th>
                <th>订单状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- 父表格 -->
              <template :key="order.order_id" v-for="order in tableData">
                <tr class="bg-[#F8F8F8] px-24 py-12">
                  <td class="table-selection-column"></td>
                  <td colspan="6">
                    <div class="cell flex px-24 py-12 text-[#777e90]">
                      <div>订单编号: {{ order.order_sn }}</div>
                      <div class="mx-30">下单时间: {{ order.created_at }}</div>
                      <div class="ml-auto text-custom-red">已取消</div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="table-selection-column"></td>
                  <td colspan="6" class="p-0">
                    <div class="c-table-wrapper">
                      <div class="child-table-content">
                        <table class="w-full">
                          <colgroup>
                            <col />
                            <col style="width: 154px" />
                            <col style="width: 239px" />
                            <col style="width: 179px" />
                            <col style="width: 118px" />
                          </colgroup>
                          <tbody>
                            <!-- 子表格 -->
                            <template
                              :key="product.id"
                              v-for="(product, pIndex) in order.products"
                            >
                              <tr>
                                <td>
                                  <div class="flex justify-between p-12 cell">
                                    <div
                                      class="img overflow-hidden w-[100px] h-[100px] rounded-[4px]"
                                    >
                                      <el-image
                                        :src="product.talent_product_image"
                                      ></el-image>
                                    </div>
                                    <div
                                      class="flex flex-col justify-between ml-12 grow"
                                    >
                                      <div class="flex justify-between mr-20">
                                        <div>
                                          {{ product.talent_product_name }}
                                        </div>
                                        <div>
                                          <div>¥3.9</div>
                                          <div class="text-custom-gray">
                                            x 1
                                          </div>
                                        </div>
                                      </div>
                                      <div class="text-custom-gray">
                                        {{ product.talent_sku_name }}
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td v-if="pIndex == 0" rowspan="2">
                                  <div class="cell">
                                    <span>¥{{ order.total_amount }}</span>
                                  </div>
                                </td>
                                <td v-if="pIndex == 0" rowspan="2">
                                  <div class="cell">
                                    <div>{{ order.address_info.name }}</div>
                                    <div>{{ order.address_info.phone }}</div>
                                    <div>
                                      {{
                                        order.address_info.province +
                                        ' ' +
                                        order.address_info.city +
                                        ' ' +
                                        order.address_info.district
                                      }}
                                    </div>
                                    <div>{{ order.address_info.address }}</div>
                                  </div>
                                </td>
                                <td v-if="pIndex == 0" rowspan="2">已取消</td>
                                <td v-if="pIndex == 0" rowspan="2">
                                  <div class="text-center cell">
                                    <el-button @click="toPath('/order/detail')" class="text-[12px]" text>
                                      订单详情
                                    </el-button>
                                  </div>
                                </td>
                              </tr>
                            </template>
                            <!-- 子表格 -->
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </td>
                </tr>
              </template>
              <!-- 父表格 -->
            </tbody>
          </table>
          <div class="flex items-center justify-end">
            <el-pagination layout=" prev, pager, next" :total="10">
            </el-pagination>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, reactive, ref, toRaw, watch } from 'vue'
import { ElTable } from 'element-plus'
import mockData from './mock.js'
import { useRouter } from 'vue-router'

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<any[]>([])
const toggleSelection = (rows?: any[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

const handleCancelSelect = () => {
  multipleTableRef.value!.clearSelection()
}
let resData = mockData.data.data
const tableData: any[] = resData
console.log(tableData)
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

let orderTable = ref([])
const drawer = ref(false)
const handleBuySubmit = (row: any) => {
  drawer.value = true
  orderTable.value = [toRaw(row)]
}
const batchOrdering = () => {
  if (multipleSelection.value.length) {
    drawer.value = true
    orderTable.value = multipleSelection.value
  }
}
const addProduct = () => {
  orderTable.value.push({
    supplyPrice: 0,
  })
}

const router = useRouter()
const toPath = (path) => {
  router.push(path)
}

const handleDelete = (index) => {
  orderTable.value.splice(index, 1)
}
let totalPrice = ref(0)
watch(
  () => orderTable.value,
  (newVal, oldVal) => {
    totalPrice.value = newVal
      .map((res) => res.supplyPrice)
      .reduce((acc, cur) => acc + cur, 0)
  },
  { deep: true }
)
const options = [
  {
    id: 12957453,
    name: '【111】58mm加厚毛绒吧唧',
  },
  {
    id: 13471077,
    name: '【Nick】仿柯印厚亚克力挂件（支持彩窗）',
  },
  {
    id: 13471115,
    name: '【Nick】12cm插卡立牌圆形底座',
  },
]
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 280px;
}

.demo-form-inline .el-select {
  --el-select-width: 280px;
}
.layout-page {
  width: 1180px;
  margin: 0 auto 40px;
  .nav-bar {
    padding-bottom: 48px;
  }
  main {
    .top {
      padding: 50px 0;
      background-color: #fff;
      border-radius: 8px;
      .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        &:not(:last-child) {
          border-right: 1px solid #e6e8ec;
        }
      }
    }
    .search-wrap {
      background-color: #fff;
      border-radius: 8px;
      padding: 24px;
    }
    .table-wrap {
      margin-top: 10px;
      padding: 20px;
      background-color: #fff;
    }
  }
  .f-table {
    box-sizing: border-box;
    td,
    th {
      padding: 8px;
      border-right: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      border-left: 1px solid #f0f0f0;
    }
    .c-table-wrapper {
      table {
        box-sizing: border-box;
      }
      td,
      th {
        border: 0;
        & {
          border-right: 1px solid #f0f0f0;
          border-bottom: 1px solid #f0f0f0;
        }
      }
    }
  }
}
</style>
